<template>
	<view>
		<view class="logo" :style="{color:textColor}">
			<view class="title">小饮与食</view>
			<view class="slogan1">drink and eat</view>
			<view class="slogan2">all for customers</view>
			<view class="slogan3">个性化定制</view>
		</view>
		<view class="box">
			<view class="imgBox" :style="{'background-image':'url('+imageUrl+')'}"></view>
			<view class="wordBox"   :style="{background:backgroundColor}">
				<view class="boxtitle">
					<view class="title">小饮与食</view>
					<view class="slogan1">drink and eat</view>
					<view class="slogan2">all for customers</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LogoTextList:[],
				imageUrl:"../../static/images/home/indexcenter.png",
				backgroundColor:"black",
			}
		},
	}
</script>

<style lang="scss" scoped>
.logo{
	text-align: center;
	margin-bottom: 130rpx;
	.title{
		margin-top: 170rpx;
		font-size: 110rpx;
		font-weight:600;
		font-family: "华文隶书";
		
	}
	.slogan1{
		margin-top:15rpx;
		text-transform:uppercase;	 //大写
		font-size:27rpx;
		font-weight: 600;
	}
	.slogan2{
		font-size:27rpx;
		font-style:oblique;
		text-transform:lowercase; //小写
	}
	.slogan3{
		margin-top: 14rpx;
		font-size: 27rpx;
		font-family:"华文楷体";
		font-weight:400;
		letter-spacing:4rpx;
	}
}



.box{
		width: 750rpx;
		height: 500rpx;
		border-radius: 25rpx;
		background-color: black;
		display: flex;
		flex-direction: row;
		.imgBox{
			height: 100%;
			width: 45%;
			border-radius:7rpx 0 0 7rpx;
			background-size:cover
		}
		.wordBox{
			height: 100%;
			width: 55%;
			border-radius:0 7px 7px 0;
			color: white;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			.boxtitle{
				margin-left: -25rpx;
			}
			.title{
				margin-top: -20rpx;
				font-size: 75rpx;
				font-family: "华文隶书";
				font-weight: 600;
			}
			.slogan1{
				text-transform:uppercase;/*大写*/
				font-weight: 600;
				font-size: 23rpx;
			}
			.slogan2{
				font-style:oblique;
				text-transform:lowercase; /*小写*/
				margin-top: 5rpx;
				font-size: 23rpx;
			}
		}
	}
</style>